import Taro, {Component, Config} from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import {SDBody, SDSlide} from 'sudao-ui'

import SKUPicker from "../../../comps/sku-picker";

import './index.less'

import CartIcon from '../../../images/ic_shopping_cart_small.png'

export default class FavoritesPage extends Component {

  config: Config = {
    navigationBarTitleText: '收藏夹'
  }

  previewSlideID: string = ''

  render () {
    const dataArray = Array.from({length: 20}, (_, v) => v)
    return (
      <SDBody sd-class='container'>
        {
          dataArray.map((_, index) => {
            return (
              <View className={`cell-item border-bottom_1px ${index == dataArray.length - 1 ? 'cell-item_invalid' : ''}`} key={index}>
                <SDSlide
                  id={`compsSlide_ID${index}`}
                  slideWidth={160}
                  height={210}
                  onWillEditing={this.onSlideWillEditing.bind(this, index)}
                  renderSlide={
                    <View className='cell-btn_outer'>
                      {
                        index == dataArray.length - 1 ? (
                          <View className="btn-content" onClick={this.onDeleteBtnTaped.bind(this, index)}>删除</View>
                        ) : (
                          <View className="btn-content" onClick={this.onFavoritesBtnTaped.bind(this, index)}>取消收藏</View>
                        )
                      }
                    </View>
                  }
                >
                  <View className="cell-content" onClick={this.onCellTaped.bind(this, index)}>
                    <View className="img-content">
                      <Image className="img-icon" src='' mode='aspectFill' lazyLoad></Image>
                    </View>
                    <View className="cell-right">
                      <View className="cell-title">银河系925银叠戴基础手镯</View>
                      <View className="cell-price">￥198.00</View>
                      <View className="cell-bottom">
                        <View className="cell-bitem">库存3000</View>
                        <View className="cell-bitem">销量2000</View>
                      </View>
                    </View>

                    {
                      index == dataArray.length - 1 ? (<View className="cell-tag">失效</View>) : (
                        <View className="cart-content" onClick={this.onCartIconTaped.bind(this, {})}>
                          <Image className="cart-icon" src={CartIcon}></Image>
                        </View>
                      )
                    }
                  </View>
                </SDSlide>
              </View>
            )
          })
        }

        <SKUPicker ref='compsSkuPicker' onSelect={this.onSkuSelect}/>
      </SDBody>
    )
  }

  endEditingPreCell = () => {
    if (this.previewSlideID.length > 0) {
      let comps = (this.$scope.selectComponent(`#${this.previewSlideID}`) || {}).$component
      comps && comps.endEditing()
      this.previewSlideID = ''
    }
  }

  onSlideWillEditing = (index: number) => {
    this.endEditingPreCell()
    this.previewSlideID = `compsSlide_ID${index}`
  }

  onDeleteBtnTaped = (index: number, e) => {
    e.stopPropagation()
    let currentSlideID = `compsSlide_ID${index}`
    console.log(currentSlideID)
  }

  onFavoritesBtnTaped = (index: number, e) => {
    e.stopPropagation()
    let currentSlideID = `compsSlide_ID${index}`
    console.log(currentSlideID)
  }

  onCellTaped = (index, e) => {
    e.stopPropagation()
    this.endEditingPreCell()

    let currentSlideID = `compsSlide_ID${index}`
    let comps = (this.$scope.selectComponent(`#${currentSlideID}`) || {}).$component
    if (comps && comps.isInEditing()) {
      comps.endEditing()
      return
    }
    if (this.previewSlideID.length > 0) { return }
    console.log('====')
  }

  onCartIconTaped = (_: any, e) => {
    e.stopPropagation && e.stopPropagation()
    this.refs.compsSkuPicker && this.refs.compsSkuPicker.show()
  }

  onSkuSelect = () => {
    this.refs.compsSkuPicker && this.refs.compsSkuPicker.dismiss()
  }

}
